<template>
  <div class="home">
    <h1>三角图</h1>
    <div class="item">
      <triangle-chart ref="triangle"> </triangle-chart>
    </div>
    <h1>反向坐标轴</h1>
    <div class="item">
      <geo-chart ref="geo"></geo-chart>
    </div>
    <h1>判识图</h1>
    <div class="item">
      <two-side-chart ref="two"></two-side-chart>
    </div>
    <h1>指数图</h1>
    <div class="item">
      <index-chart ref="indexchart"></index-chart>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import TriangleChart from "@/components/TriangleChart/index.vue";
import IndexChart from "@/components/IndexChart/index.vue";
import { TwoSideChart } from "@/components/TwoSideChart";
import { GeoChart } from "@/components/GeoChart";
@Component({
  name: "Home",
  components: { TriangleChart, IndexChart, TwoSideChart, GeoChart }
})
export default class Home extends Vue {
  @Ref("triangle")
  private triangle!: TriangleChart;

  @Ref("indexchart")
  private index!: IndexChart;

  @Ref("two")
  private two!: TwoSideChart;

  @Ref("geo")
  private geo!: GeoChart;

  createTrianglePoint() {
    const x = Math.ceil(Math.random() * 100);
    const rate = Math.random();
    const y = Number(((100 - x) * rate).toFixed(2));
    const z = 100 - x - y;
    return { x, y, z };
  }

  mounted() {
    this.geo.setOptions({
      grid: {
        left: 10,
        right: 10,
        top: 10,
        bottom: 10
      },
      series: {
        levels: [
          {
            name: "A",
            line: {
              color: "pink",
              width: 2
            },
            depth: {
              start: 4000,
              end: 5800
            },
            year: {
              start: 500,
              end: 580
            },
            data: [
              { year: 580, temp: 20 },
              { year: 540, temp: 23 },
              { year: 500, temp: 30 },
              { year: 440, temp: 40 },
              { year: 400, temp: 50 },
              { year: 360, temp: 60 },
              { year: 320, temp: 70 },
              { year: 280, temp: 90 },
              { year: 240, temp: 75 },
              { year: 200, temp: 85 },
              { year: 160, temp: 100 },
              { year: 120, temp: 120 },
              { year: 80, temp: 90 },
              { year: 40, temp: 110 },
              { year: 0, temp: 130 }
            ]
          },
          {
            name: "B",
            line: {
              color: "blue"
            },
            depth: {
              start: 3200,
              end: 4000
            },
            year: {
              start: 430,
              end: 500
            },
            data: [
              { year: 500, temp: 21 },
              { year: 440, temp: 28 },
              { year: 400, temp: 24 },
              { year: 360, temp: 27 },
              { year: 320, temp: 33 },
              { year: 280, temp: 37 },
              { year: 240, temp: 45 },
              { year: 200, temp: 51 },
              { year: 160, temp: 75 },
              { year: 120, temp: 61 },
              { year: 80, temp: 81 },
              { year: 40, temp: 93 },
              { year: 0, temp: 98 }
            ]
          },
          {
            name: "C",
            depth: {
              start: 2000,
              end: 3200
            },
            year: {
              start: 210,
              end: 430
            },
            data: []
          },
          {
            name: "D",
            depth: {
              start: 800,
              end: 2000
            },
            year: {
              start: 120,
              end: 210
            },
            data: []
          },
          {
            name: "E",
            depth: {
              start: 0,
              end: 800
            },
            year: {
              start: 0,
              end: 120
            },
            data: []
          }
        ]
      },
      axies: {
        fontSize: 14,
        fontWeight: "bold",
        depth: {
          start: 0,
          end: 6000,
          label: "深度(m)",
          color: "red"
        },
        year: {
          start: 0,
          end: 600,
          label: "年代(Ma)",
          color: "green"
        },
        temp: {
          start: 21,
          end: 136,
          label: "温度(℃)",
          color: "blue"
        }
      }
    });

    this.two.setOptions({
      padding: {
        left: 30,
        right: 100,
        top: 10,
        bottom: 0
      },
      axies: {
        x: {
          origin: -15,
          leftAxis: {
            color: "red",
            label: {
              text: "C1"
            }
          },
          rightAxis: {
            color: "purple",
            label: {
              text: "C2"
            }
          }
        },
        y: {
          color: "green",
          label: {
            text: "ABC1"
          }
        }
      },
      series: [
        {
          points: (() => {
            const points: Array<any> = [];
            for (let i = 0; i < 50; i++) {
              points.push({
                side: Math.random() > 0.5 ? "left" : "right",
                x: Math.floor(Math.random() * -35) - 15,
                y: Math.floor(Math.random() * -100)
              });
            }
            return points;
          })(),
          icon: {
            type: "triangle",
            fill: "blue",
            size: 15
          }
        },
        {
          points: (() => {
            const points: Array<any> = [];
            for (let i = 0; i < 50; i++) {
              points.push({
                side: Math.random() > 0.5 ? "left" : "right",
                x: Math.floor(Math.random() * -35) - 15,
                y: Math.floor(Math.random() * -100)
              });
            }
            return points;
          })(),
          icon: {
            type: "circle",
            fill: "yellow",
            stroke: "green",
            stroekWidth: 2,
            size: 15
          }
        },
        {
          points: (() => {
            const points: Array<any> = [];
            for (let i = 0; i < 50; i++) {
              points.push({
                side: Math.random() > 0.5 ? "left" : "right",
                x: Math.floor(Math.random() * -35) - 15,
                y: Math.floor(Math.random() * -100)
              });
            }
            return points;
          })(),
          icon: {
            type: "rect",
            fill: "pink",
            stroke: "red",
            stroekWidth: 1,
            size: 15
          }
        }
      ],
      guideLines: {
        width: 2,
        color: "#000",
        lines: {
          upLine: { x1: -15, y1: -18, x2: -23, y2: -90 },
          downLine: {
            x1: -15,
            y1: -10,
            x2: -45,
            y2: -50,
            path: [
              { x1: -23, x2: -28 },
              { x1: -35, x2: -45 }
            ]
          }
        },
        rect: { xmax: -28, xmin: -30, y: -80 }
      }
    });

    // 绘制三角图
    this.triangle.setOptions({
      showGrid: false,
      series: [
        {
          label: "分组1",
          icon: {
            type: "circle",
            fill: "pink",
            stroke: "#7821b9",
            stroekWidth: 2,
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 50; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        },
        {
          label: "分组2",
          icon: {
            type: "diamond",
            fill: "blue",
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 20; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        },
        {
          label: "分组三",
          icon: {
            type: "five-star",
            fill: "yellow",
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 40; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        }
      ],
      padding: 80,
      axies: {
        label: {
          fontSize: 14,
          bold: true
        },
        x: {
          title: "MCH",
          color: "red"
        },
        y: {
          title: "nC₇",
          color: "green"
        },
        z: {
          title: "RCPC₇",
          color: "#0961c3"
        }
      },
      splitLines: [
        {
          axis: "y",
          rate: 0.7,
          upLabel: "Ⅰ型",
          upLabelFromLine: 50,
          bottomLabel: "Ⅱ型",
          bottomLabelFromLine: 70,
          color: "#000",
          lineStyle: {
            width: 3
          },
          textStyle: {
            fontSize: 16,
            fontWeight: "bold"
          }
        }
      ],
      area: {
        x: 5,
        y: 10,
        z: 85,
        label: {
          xyLabel: "xy轴区域的标题",
          yzLabel: "yz轴区域的标题",
          zxLabel: "zx轴区域形成的标题",
          textStyle: {
            fontSize: 14,
            fontWeight: "normal"
          }
        },
        lineStyle: {
          width: 2,
          color: "purple",
          type: "dash"
        }
      }
    });

    this.index.setOptions({
      series: [
        {
          points: (() => {
            const points: { x: number; y: number; name?: string }[] = [];
            for (let i = 0; i < 20; i++) {
              points.push({
                x: Math.floor(Math.random() * 200),
                y: Math.floor(Math.random() * 200),
                name: Math.random() > 0.7 ? "点" + (points.length + 1) : ""
              });
            }
            return points;
          })(),
          icon: {
            type: "five-star",
            size: 15,
            fill: "yellow",
            stroke: "green",
            stroekWidth: 2
          }
        },
        {
          points: (() => {
            const points: { x: number; y: number }[] = [];
            for (let i = 0; i < 20; i++) {
              points.push({
                x: Math.floor(Math.random() * 200),
                y: Math.floor(Math.random() * 200)
              });
            }
            return points;
          })(),
          icon: {
            type: "diamond",
            size: 15,
            fill: "purple",
            stroke: "blue",
            stroekWidth: 2
          }
        }
      ],
      axises: {
        x: {
          label: "[ MCH ]",
          color: "red"
        },
        y: {
          label: "[ CH ]",
          color: "green"
        }
      },
      padding: 50,
      guideLines: [
        {
          x: 160,
          y: 140,
          color: "blue",
          width: 2,
          upLabel: {
            text: "Ⅲ型",
            color: "red"
          },
          downLabel: {
            text: "Ⅱ型",
            offset: 15
          }
        },
        {
          x: 95,
          y: 83,
          type: "solid",
          downLabel: {
            text: "Ⅰ型"
          }
        }
      ]
    });
  }
}
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
  .item {
    margin: 0 auto;
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    &:last-child {
      margin-bottom: 100px;
    }
  }
}
</style>
